<template>
  <div class="container">
    <v-header></v-header>
    <v-sidebar :class="[isShow?'hide':'show']" class="sidebar"  @mouseover.native="goExpand"></v-sidebar>
    <div class="cx-ym" @click="goShrink()">
      <v-details></v-details>
    </div>
  </div>
</template>

<script>
import Header from "./public/Header.vue";
import Sidebar from "./process/Sidebar.vue";
import Details from "./process/Details.vue";
import store from '@/vuex/store.js'
export default {
  data() {
    return {
      isShow: false
    };
  },
  components: {
    "v-header": Header,
    "v-sidebar": Sidebar,
    "v-details": Details,
  },
  store,
  mounted () {
    store.commit('changehref', 3)
  },
  methods: {
    goShrink: function() {
      if (!this.isShow) {
        this.isShow = true;
      }
    },
    goExpand: function() {
      if (this.isShow) {
        this.isShow = false;
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.container {
  min-width: 1200px;
  width: 100%;
  height: 100%;
  .cx-ym {
    width: 100%;
    height: calc(100% - 110px);
  }
  .sidebar.hide {
    animation: hide 0.5s forwards;
  }
  .sidebar.show {
    animation: show 1s forwards;
  }
  @keyframes hide {
    form {
      transform: translateX(0);
    }
    to {
      transform: translateX(-345px);
    }
  }
  @keyframes show {
    form {
      transform: translateX(-345px);
    }
    to {
      transform: translateX(0);
    }
  }
}
</style>